import './style.less';
import * as THREE from 'three';
import { Tween, Easing } from '@tweenjs/tween.js';
import { lngLatToMercator } from '../../../../three/index';
import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
let tween;
export default function (data) {
  const geometry = new THREE.BoxGeometry(1, 1, data.value); // 创建一个立方体几何体
  const material = new THREE.MeshBasicMaterial({ color: data.color }); // 创建一个绿色的材质
  const mesh = new THREE.Mesh(geometry, material);
  const div = document.createElement('div');
  div.className = 'bar-label';
  div.innerHTML = `<div>${data.name}</div><div>${data.value}</div>`;
  const label = new CSS2DObject(div);
  label.position.set(0, 0, data.value / 2); // 设置标签的位置
  mesh.add(label); // 将标签添加到立方体上
  const point = lngLatToMercator(data.center);
  mesh.position.set(point.x, point.y, 0);
  mesh.name = data.name + '-bar';
  return mesh;
}
export function showBar(mesh) {
  const tween = new Tween([0]).to([1], 1500);
  tween.easing(Easing.Quadratic.InOut);
  tween.onUpdate(value => {
    mesh.scale.set(1, 1, value[0]);
  });
  tween.start();
}
export function update() {
  if (tween) tween.update();
}
